import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Space, Button, Form, Input, Badge, message, Drawer, notification } from 'antd';
import { connect } from 'umi';
import MyDataTable from '@/components/MyDataTable';
import {
    ResourceGrpSelect,
    OpMasterSelect,
    ResourceSelect,
    EmpSelect,
} from '@/components/FormItemSelect';
import request from '@/utils/request';
import { Scrollbars } from 'react-custom-scrollbars';
import moment from 'moment';

const apiURL = '/api/services/app/JobOper/';
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            params: {},
            freshNum: 0,
            pageSize: 10,
            record: [],
            message: '',
            empName: ''
        };
    }
    doubleClick = (record: any) => {
        console.log(record);
    }
    setRowSelection = (items: any) => {
        this.setState({ record: items });
    }
    formRef: any = React.createRef();
    onFinish = (values: any) => {
        var freshNum = this.state.freshNum + 1
        this.setState({ params: values, freshNum })
    }
    resetForm = () => {
        this.formRef.current.resetFields();
    }
    operateLabor = (act: string = 'BeginLabor') => {
        const { record, freshNum, empName } = this.state;
        if (record.length <= 0) {
            message.warning('请至少选择一条记录')
            return;
        }
        if (!empName || empName === '') {
            message.warning('请选择员工')
            return;
        }
        var data: any = []
        record.forEach((element: any) => {
            data.push({
                id: element.id,
                userId: empName
            })
        });
        request(apiURL + act, {
            method: 'POST',
            data,
        }).then((response) => {
            if (response && response.success) {
                this.setState({ message: response.result })
                notification.info({
                    message: '系统信息',
                    description: response.result,
                });
            }
            this.setState({ loading: false, freshNum: freshNum + 1 });
        });
    }
    switchDraw = () => {
        const { visible } = this.state
        this.setState({ visible: !visible })
    }
    setEmp = (val: any) => {
        console.log(val);

        this.setState({ empName: val })
    }
    render() {
        const columns = [
            {
                title: '工单号',
                dataIndex: 'jobNum',
                width: 100,
            },
            {
                title: '件号',
                dataIndex: 'assemblySeq',
                width: 65
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
                width: 120
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
                ellipsis: true,
                width: 220
            },
            {
                title: '序号',
                dataIndex: 'oprSeq',
                width: 65
            },
            {
                title: '工序描述',
                dataIndex: 'opDesc',
                width: 100,
                render: (text: any, record: any) => <span>{text} {record.opComplete ? <Badge status="success" /> : ''}</span>
            },
            {
                title: '开工时间',
                dataIndex: 'startDate',
                width: 105,
                render: (text: any) => text!=null ? moment(text).format("YYYY-MM-DD HH:mm:ss") : ''
            },
            {
                title: '工时',
                dataIndex: 'estProdHours',
                width: 65,
                render: (text: any) => <span>{text + 'h'}</span>
            },
            {
                title: '资源组',
                dataIndex: 'resourceGrpID',
                width: 100
            },
            {
                title: '资源',
                dataIndex: 'resourceID',
                width: 100
            },
            {
                title: '报工人',
                dataIndex: 'contractID',
                width: 100
            },
        ];
        const params = this.state.params;
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        return (
            <PageHeaderWrapper title={false}>
                <Card title="工单报工" extra={

                    <Form layout="inline">
                        <EmpSelect
                            showSearch
                            width={100}
                            name='userId'
                            label="员工"
                            onChange={this.setEmp}
                        />
                        <Form.Item>
                            <Space key="S1">
                                <Button type="primary" onClick={() => this.operateLabor('DispLabor')}>派工</Button>
                                <Button type="primary" onClick={() => this.operateLabor()}>开始</Button>
                                <Button type="default" danger onClick={() => this.operateLabor('CallLabor')}>结束</Button>
                                <Button type="default" onClick={this.switchDraw}>搜索</Button>
                            </Space>
                        </Form.Item>
                    </Form>

                }>
                    <Scrollbars autoHide style={{ height: '500px', width: '100%' }}>
                        <MyDataTable
                            act="GetList"
                            columns={columns}
                            freshNum={this.state.freshNum}
                            pageSize={this.state.pageSize}
                            control="JobOper"
                            doubleClick={this.doubleClick}
                            rowSelection={(items: any) => this.setRowSelection(items)}
                            params={params}
                            bordered={true}>
                        </MyDataTable>
                    </Scrollbars>

                </Card>
                <Drawer
                    title="高级搜索"
                    width={400}
                    placement="right"
                    closable={false}
                    visible={this.state.visible}
                    onClose={this.switchDraw}
                    mask={true}
                    maskClosable={true}
                    footer={<Button type="primary" onClick={this.switchDraw}> 关闭 </Button>}
                >
                    <Form
                        {...layout}
                        ref={this.formRef}
                        onFinish={this.onFinish}
                    >
                        <Form.Item label="工单号" name="jobNum">
                            <Input />
                        </Form.Item>
                        <Form.Item label="物料编码" name="partNum">
                            <Input />
                        </Form.Item>
                        <OpMasterSelect
                            name='opDesc'
                            label="工序"
                        />
                        <ResourceGrpSelect
                            name='resourceGrpID'
                            label="资源群组"
                        />
                        <ResourceSelect
                            name='resourceID'
                            label="资源"
                        />
                        <EmpSelect
                            showSearch
                            name='userId'
                            label="员工"
                        />
                        <Form.Item wrapperCol={{ offset: 5 }}>
                            <Space>
                                <Button type="primary" htmlType="submit">查找</Button>
                                <Button type="default" onClick={this.resetForm}>重置</Button>
                            </Space>
                        </Form.Item>
                    </Form>

                </Drawer>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp, user }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: user.currentUser,
}))(ViewPage);